<template>
  <div>
    <div style="height: 100%;width: 100%;display: flex;align-items: center;justify-content: center;">
      <div class="video" v-show="isPlay" :id="elId"></div>
      <div v-show="!isPlay" style="color: #08979C;font-size: 25px;">暂无视频源</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref,onMounted} from 'vue'
import FlvJsPlayer from 'xgplayer-flv.js';//在shim-vue.d.ts，中加上declare module 'xgplayer-flv.js'；因为这个没有ts版本，只有js
import Player from 'xgplayer';

import { guid } from '../utils/util';

const isPlay = ref(false)
const player = ref<any>({})
const elId = guid()
//const elId = "111111111"

const visibilitychange = onMounted(() => {
  console.log('computed执行');
/*  document.addEventListener('visibilitychange', function () {
    // console.log(document.visibilityState);
    // console.log(document.hidden);
    if (document.hidden) {
      console.log("页面隐藏")
    }
  });*/
})

//const createPlayer = (url: string, hasCloseBtn: boolean, index: number) => {
const createPlayer = (url: string, hasCloseBtn: boolean, index: number) => {

  console.log(url);
  console.log(hasCloseBtn);
  console.log(index);

  if (!url) {
    return;
  }

  // if (player) {
  //     changeVideo(url);
  //     return;
  // }

  isPlay.value = true;
  player.value = new FlvJsPlayer({
    id: elId,
    url: url,
    // fitVideoSize: 'auto',
    fluid: true,
    autoplay: true,
    isLive: true,
    playsinline: false,
    screenShot: true,
    whitelist: [''],
    ignores: ['time'],
    closeVideoClick: true,
    // errorTips: '<span class="app-error">无视频源</span>',
    customConfig: {
      isClickPlayBack: false
    },
    flvOptionalConfig: {
      enableWorker: true,
      enableStashBuffer: true, //启用缓存
      stashInitialSize: 4096, //缓存大小4m
      lazyLoad: false,
      lazyLoadMaxDuration: 40 * 60,
      autoCleanupSourceBuffer: true,
      autoCleanupMaxBackwardDuration: 35 * 60,
      autoCleanupMinBackwardDuration: 30 * 60
    } //flv.js可选配置项 [flv.js配置](https://github.com/bilibili/flv.js/blob/master/docs/api.md#config)
  });

  // 自定义播放器按钮
  // let divStr =
  //   '<i class="btn-hover el-icon-camera button-screen-shot" style="font-size: 23px;margin-right: 10px;pointer-events: auto;"></i>' +
  //   '<i class="btn-hover el-icon-s-tools button-set" style="font-size: 23px;margin-right: 10px;pointer-events: auto;"></i>' +
  //   '<i class="btn-hover el-icon-video-camera-solid button-history" style="font-size: 23px;margin-right: 10px;pointer-events: auto;"></i>';

  let divStr = '<i class="btn-hover el-icon-d-arrow-left button-playback" style="font-size: 23px;pointer-events: auto;"></i>';

  let divClose = '<i @click="closePlayer" class="btn-hover el-icon-close app-close-btn-c"></i>';

  let util = Player.util;
  // let customBtn = util.createDom('div', divStr, {}, 'flex align-center justify-center app-player-button'); //'div', divStr, {}, 'class'
  let customBtn = util.createDom(
      'div',
      divStr,
      { style: 'width: 40px;heigth:40px;position: absolute;right: 155px;top: 7px;' },
      'flex align-center justify-center app-player-button'
  ); //'div', divStr, {}, 'class'
  let closeBtn = util.createDom('div', divClose, {}, 'app-close-btn');
  let xgControls = player.value.root.querySelector('xg-controls');
  let xgError = player.value.root.querySelector('xg-error');
  xgControls.appendChild(customBtn);
  player.value.root.appendChild(closeBtn);

  // let shot = customBtn.querySelector('.button-screen-shot');
  // let set = customBtn.querySelector('.button-set');
  // let history = customBtn.querySelector('.button-history');
  let closeBtnc = closeBtn.querySelector('.app-close-btn-c');
  let playback = customBtn.querySelector('.button-playback');

  player.value.on('play', () => { });
  player.value.on('focus', () => {
    if (hasCloseBtn) {
      closeBtn.style.display = 'block';
    }
  });
  player.value.on('ended', () => { });
  player.value.on('blur', () => {
    closeBtn.style.display = 'none';
  });

  player.value.on('error', () => { });

  if (closeBtnc) {
    closeBtnc.addEventListener('click', () => {
      closePlayer();
    });
  }

  // 点击视频时间，设置selectIndex
  // player.video.addEventListener('click', () => {
  //     $emit('clickPlayer', index);
  // });
}

const changeVideo = (url: string) => {
  player.value.src = url;
}

const closePlayer = () => {
  isPlay.value = false;
  if (player.value) {
    player.value.destroy();
  }
}

const playObjDestroy = () => {
  if (player.value) {
    player.value.destroy();
  }
  console.log('销毁了');
}

defineExpose({
  createPlayer,
  playObjDestroy
})

</script>